<template>
	<view class="">
		<view class="con">
			<image src="/static/common/loginbg.png" class="bg" mode=""></image>
			<view class="con__info">
				<!-- <view class="con__mobile">
					登录
				</view> -->
				<view class="" style="background-color: white;margin-bottom: 30rpx;width: 547rpx;">
					<u--input placeholder="请输入昵称" border="surround" prefixIcon="account"
						v-model="reg_form.username"></u--input>
				</view>
				<view class="" style="background-color: white;margin-bottom: 30rpx;width: 547rpx;">
					<u--input placeholder="请输入手机号" border="surround" prefixIcon="phone"
						v-model="reg_form.mobile"></u--input>
				</view>
				<view class="" style="background-color: white;margin-bottom: 30rpx;width: 547rpx;">
					<u--input placeholder="请输入密码" border="surround" prefixIcon="lock"
						v-model="reg_form.password"></u--input>
				</view>
				<view class="" style="background-color: white;margin-bottom: 30rpx;width: 547rpx;">
					<u-input placeholder="请输入验证码" border="surround" v-model="reg_form.code" prefixIcon="list-dot">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="30" changeText="Xs" startText="获取验证码"
								endText="重新发送验证码"></u-code>
							<text @tap="getCode" style="color: #5d8eff;font-size: 22rpx;">{{tips}}</text>
						</template>
					</u-input>
				</view>
				<u-button @click="login"
					:customStyle="{width:'587rpx',height:'93rpx',padding:0,fontSie:'32rpx',margin:'0 0 120rpx',}"
					shape='circle' color="#FF4D30" text="注册"></u-button>
			</view>
		</view>
		<view class="footer">
			<view class="tip" @click="other" style="position: relative;z-index: 99;">
				已有账号，前去登录
			</view>
			<image src="/static/common/wx.png" class="vx" mode="" style="opacity: 0;"></image>
			<view class="u-flex u-flex-y-center">
				<u-checkbox-group v-model="checkboxValue1" activeColor="#ff4d30">
					<u-checkbox :customStyle="{marginRight: '5rpx'}" shape="circle">
					</u-checkbox>
				</u-checkbox-group>
				<view class="text">我已阅读并同意
					<text style="font-size: 24rpx;color: #FF4D30;">《用户协议》</text>和
					<text style="font-size: 24rpx;color: #FF4D30;">《隐私政策》</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		sendSms,
		register
	} from "@/request/api/login.js"
	export default {
		data() {
			return {
				reg_form: {
					"username": "",
					"mobile": "",
					"password": "",
					"code": "8888",
				},
				tips: "",
				checkboxValue1: [],
			}
		},
		onLoad() {

		},
		methods: {
			async getCode() {
				if (!this.reg_form.mobile) {
					uni.$u.toast('请先输入手机号');
					return
				}
				if (this.$refs.uCode.canGetCode) {

					sendSms({
						event: "register",
						mobile: this.reg_form.mobile,
					}).then(res => {
						console.log(res)
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					}).catch(err => {
						console.log(err)
					})



				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			login() {
				if (!this.reg_form.username) {
					uni.$u.toast('请输入昵称');
					return
				}
				if (!this.reg_form.mobile) {
					uni.$u.toast('请先输入手机号');
					return
				}
				if (!this.reg_form.password) {
					uni.$u.toast('请输入密码');
					return
				}
				if (!this.reg_form.code) {
					uni.$u.toast('请输入验证码');
					return
				}
				if (this.checkboxValue1.length == 0) {
					uni.$u.toast('请阅读并同意《用户协议》和《隐私政策》');
					return
				}
				register(this.reg_form).then(res => {
					if (res.code == 1) {
						uni.setStorageSync("token", res.data.userinfo.token);
						uni.setStorageSync("userInfo", res.data.userinfo);
						uni.reLaunch({
							url: "/pages/tabbar/home"
						})
					}
				})
				// uni.switchTab({
				// 	url: '/pages/tabbar/my'
				// })
			},
			other() {
				uni.reLaunch({
					url: "/pages/index/login2"
				})
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 750rpx;
		height: 1171rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.con {
		position: relative;
		width: 750rpx;
		height: 1171rpx;

		&__info {
			position: absolute;
			bottom: 0;
			width: 750rpx;
			left: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		&__mobile {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 44rpx;
			color: #1E1E1E;
			line-height: 34rpx;
			margin-bottom: 32rpx;
		}

		&__text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #949494;
			line-height: 24rpx;
			margin-bottom: 52rpx;
		}

	}

	.footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -80rpx;
		padding-bottom: 60rpx;

		.tip {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #9A9A9A;
			line-height: 24rpx;
		}

		.vx {
			width: 84rpx;
			height: 81rpx;
			margin: 40rpx 0;
		}

		.text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #9A9A9A;
			line-height: 24rpx;
			display: flex;
			align-items: center;
		}
	}
</style>